<template>
  <div class="app-container">
    <div class="footer">
      <div class="flex justify-end mb-3">
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="state.data"
        style="width: 100%"
        rowKey="adv_id"
        :pagination="state.pagination"
        @change="pageChange"
        :loading="state.loading"
        :scroll="{ x: 1200 }"
      >
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'actions'">
            <a-space size="small">
              <a-button type="link" @click="handleEdit(record)">编辑</a-button>
              <a-popconfirm
                title="你确定要删除吗?"
                ok-text="确认"
                cancel-text="取消"
                @confirm="handleDelete(record)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <!--  弹出框-->
  <create-edit ref="createRef" @model-success="refresh" />
</template>
<script setup>
import { list, del } from "@/api/energyLevel";
import { reactive, ref } from "vue";
import CreateEdit from "./components/CreateEdit.vue";
import { message } from "ant-design-vue";

//弹出框的ref
const createRef = ref();
const columns = [
  {
    title: "id",
    dataIndex: "level_id",
    width: 100,
  },
  {
    title: "名称",
    dataIndex: "name",
    width: 200,
    customRender(record) {
      return record.value || "-";
    },
  },
  {
    title: "等级",
    dataIndex: "level",
    width: 180,
  },
  {
    title: "最小区间",
    dataIndex: "min_energy",
    width: 150,
  },
  {
    title: "最大区间",
    dataIndex: "max_energy",
    width: 150,
  },
  {
    title: "区间比例",
    dataIndex: "rate",
    width: 150,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
    width: 100,
  },
];
const state = reactive({
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  },
});
//获取列表的数据
const getList = () => {
  state.loading = true;
  list({
    ...state.searchParams,
  }).then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  //搜索
  getList();
};
// 添加
const handleAdd = () => {
  createRef.value.show();
};
// 编辑
const handleEdit = (record) => {
  createRef.value.show(record);
};
// 删除
const handleDelete = (record) => {
  del({
    id: record.level_id,
  }).then((res) => {
    if (res.code === 0) {
      message.success(res.msg);
      getList();
    }
  });
};
const refresh = () => {
  getList();
};
getList();
</script>
<style scoped lang="scss">
@import "./index";
</style>